<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <title>APP</title>
        <link rel="stylesheet" type="text/css" href="../css/aui.css" />
        <link rel="stylesheet" type="text/css" href="../css/aui-eg.css" />
        <style>
            html, body {
                background-color: transparent;
            }
        </style>
    </head>
    <body>
        <div onclick="bodyListTouch('-1');" id="aui_modal" class="aui-eg-modal aui-eg-modal-bg">
            <div id="aui_modal_body" class="aui-eg-modal-body">
                <div id="aui_modal_body_title" class="aui-eg-modal-body-title">
                    <label>Menu</label><span onclick="bodyListTouch('-1');" class="aui-iconfont aui-icon-close aui-pull-right"></span>
                </div>
                <ul id="aui_modal_body_view" class="aui-eg-modal-body-view"></ul>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/aui-eg.js"></script>
    <script type="text/javascript">
        apiready = function() {
            api.parseTapmode();
            init();
        };
        function init() {
            //模态透明度
            var modalOpacity = api.pageParam.modalOpacity ? api.pageParam.modalOpacity : "0.0";
            //菜单圆角
            var menuRadius = api.pageParam.menuRadius ? api.pageParam.menuRadius : "5";
            //菜单背景颜色 支持rgba透明
            var menuBgColor = api.pageParam.menuBgColor ? api.pageParam.menuBgColor : "rgba(255,255,255,0.8)";
            var menuBgColor2 = api.pageParam.menuBgColor2 ? api.pageParam.menuBgColor2 : "rgba(255,255,255,0.8)";
            //标题文字
            var textTitle = api.pageParam.textTitle ? api.pageParam.textTitle : "Menu";
            //标题文字颜色
            var titleColor = api.pageParam.titleColor ? api.pageParam.titleColor : "#333333";
            //标题背景颜色
            var titleBgColor = api.pageParam.titleBgColor ? api.pageParam.titleBgColor : "#363636";
            //内容文字颜色
            var textColor = api.pageParam.textColor ? api.pageParam.textColor : "#333333";
            //已选文字颜色
            var activeColor = api.pageParam.activeColor ? api.pageParam.activeColor : "#f1c40f";
            //已选背景颜色
            var activeBgColor = api.pageParam.activeBgColor ? api.pageParam.activeBgColor : "#eeeeee";
            //文字对其方式
            var textAlign = api.pageParam.textAlign ? api.pageParam.textAlign : "left";
            //文字大小
            var textSize = api.pageParam.textSize ? api.pageParam.textSize : "18";
            //文字内容
            var textData = api.pageParam.textData ? api.pageParam.textData : ["上海菜", "北京菜", "川菜", "粤菜", "湘菜", "云南菜", "江浙菜", "贵州菜", "东北菜", "西北菜", "湖北菜", "鲁菜", "清真菜", "火锅", "家常菜", "自助餐", "小吃简餐", "东南亚菜", "西餐", "面包甜点", "快餐", "烧烤", "赣菜", "其他", "海鲜", "私家菜", "台湾菜", "杭帮菜", "农家菜", "闽菜", "徽菜", "海南菜", "新疆菜", "土菜", "广西菜", "桂北菜", "日本料理", "韩国料理", "印度菜", "越南菜", "泰国菜"];
            //预设选中
            var textDefault = api.pageParam.textDefault ? api.pageParam.textDefault : "江浙菜";
            
            //标题处理
            var modalBodyTitlePanel = document.getElementById("aui_modal_body_title");
            var titleHeight = modalBodyTitlePanel.offsetHeight;
            modalBodyTitlePanel.style.color = titleColor;
            modalBodyTitlePanel.style.backgroundColor = titleBgColor;
            var modalBodyTitle = document.getElementById("aui_modal_body_title").querySelector("label");
            modalBodyTitle.innerText = textTitle;
            
            //内容处理
            var modalBodyView = document.getElementById("aui_modal_body_view");
            var html = "";
            var activeIndex = 0;
            for (k in textData) {
            	if(k%2 == 0){
	                if (textDefault === textData[k]) {
	                	activeIndex = k;
	                    html += "<li style='background-color:"+ menuBgColor2 +";color:" + activeColor + ";text-align:" + textAlign + ";' class='aui-eg-modal-body-view-cell'>" + textData[k] + "</li>";
	                } else {
	                    html += "<li tapmode='push' onclick='bodyListTouch(" + k + ");' style='background-color:"+ menuBgColor2 +";color:" + textColor + ";text-align:" + textAlign + ";' class='aui-eg-modal-body-view-cell'>" + textData[k] + "</li>";
	                }
            	}else{
	                if (textDefault === textData[k]) {
	                	activeIndex = k;
	                    html += "<li  style='background-color:"+ menuBgColor +";color:" + activeColor + ";text-align:" + textAlign + ";' class='aui-eg-modal-body-view-cell'>" + textData[k] + "</li>";
	                } else {
	                    html += "<li tapmode='push' onclick='bodyListTouch(" + k + ");' style='background-color:"+ menuBgColor +";color:" + textColor + ";text-align:" + textAlign + ";' class='aui-eg-modal-body-view-cell'>" + textData[k] + "</li>";
	                }
            	}
            }
            modalBodyView.innerHTML = html;
            setTimeout(function(){
            	var currentPosition,timer;
            	var currentPositionNow = 0;
            	if(activeIndex>3){
            		currentPositionNow = (activeIndex - 3)*titleHeight;
            	}
			    timer=setInterval(function(){
				    currentPosition=activeIndex*titleHeight;
				    currentPositionNow += 5;
				    console.log(currentPositionNow);
				    if(currentPositionNow <= currentPosition){
				    	modalBodyView.scrollTop = currentPositionNow;
				    }else{
					    modalBodyView.scrollTop = currentPosition;
					    clearInterval(timer);
				    }
			    },10);
            },30);
            
            //框架处理
            var modal = document.getElementById('aui_modal');
            modal.style.backgroundColor = "rgba(0,0,0," + modalOpacity + ")";
            
            var modalBody = document.getElementById("aui_modal_body");
            
            var h;
            if((textData.length+1)*titleHeight > (api.winHeight - 160)){
                h = api.winHeight - 160;
            }else{
                h = (textData.length+1)*titleHeight;
            }
            var y = (api.winHeight-h)/2;
            
            modalBodyView.style.height = h - titleHeight + "px";
            modalBody.style.width = api.winWidth - 60 + "px";
            modalBody.style.height = h + "px";
            modalBody.style.webkitTransform = "translate(30px," + y + "px)";
            modalBody.style.transform = "translate(30px," + y + "px)";
            modalBody.style.webkitBorderRadius = menuRadius + "px";
            modalBody.style.borderRadius = menuRadius + "px";
        }

        function bodyListTouch(index) {
            api.sendEvent({
                name : "aui-eg-modal-body-callback",
                extra : {
                    buttonIndex : index
                }
            });
            event.stopPropagation();
            api.closeFrame();
        }
    </script>
</html>